<!--
 * @Descripttion: 编辑储值
 * @Author: xiao li
 * @Date: 2020-09-03 11:48:39
 * @LastEditors: xiao li
 * @LastEditTime: 2021-11-19 17:17:35
-->
<template>
  <div class="lb-edit-stored">
    <top-nav :title="navTitle" :isBack="true"></top-nav>
    <div class="page-main" v-loading="loading">
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="aForm"
        label-width="180px"
        class="basic-form"
      >
        <div style="height: 30px"></div>
        <el-form-item label="套餐名称" prop="title">
          <el-input
            v-model="subForm.title"
            type="text"
            maxlength="20"
            show-word-limit
            placeholder="请输入套餐名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="分享标题" prop="share_title">
          <el-input
            v-model="subForm.share_title"
            type="text"
            maxlength="30"
            show-word-limit
            placeholder="请输入分享标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="分享封面图" prop="share_img">
          <lb-cover
            :fileList="subForm.share_img"
            @selectedFiles="getCover"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸: 780*624</lb-tool-tips>
        </el-form-item>
        <el-form-item label="购买价格" prop="pay_price">
          <el-input placeholder v-model="subForm.pay_price">
            <template slot="append">元</template>
          </el-input>
          <lb-tool-tips>用户所要支付的价格</lb-tool-tips>
        </el-form-item>
        <el-form-item label="实际充值" prop="true_price">
          <el-input placeholder v-model="subForm.true_price">
            <template slot="append">元</template>
          </el-input>
          <lb-tool-tips>实际充入会员卡的价格</lb-tool-tips>
        </el-form-item>
        <el-form-item label="赠送成长值" prop="growth">
          <el-input-number
            class="lb-input-number"
            v-model="subForm.growth"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入赠送成长值"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="排序" prop="top">
          <el-input-number
            class="lb-input-number"
            v-model="subForm.top"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
        <el-form-item label="套餐介绍" prop="content">
          <lb-ueditor v-model="subForm.content" :destroy="true"></lb-ueditor>
        </el-form-item>
        <el-form-item>
          <lb-button @click="submitFormInfo" type="primary">{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="goBack">{{ $t('action.back') }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    let validateInt = (rule, value, callback) => {
      if (!/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(value) || value < 0.01) {
        callback(new Error('请输入大于0的数字，最多保留两位小数'))
      } else {
        callback()
      }
    }
    return {
      loading: true,
      navTitle: '',
      subForm: {
        id: '',
        title: '',
        pay_price: '',
        true_price: '',
        growth: 0,
        share_title: '',
        share_img: '',
        top: 0,
        content: ''
      },
      subFormRules: {
        title: { required: true, type: 'string', message: '请输入套餐名称', trigger: 'blur' },
        share_title: { required: true, type: 'string', message: '请输入分享标题', trigger: 'blur' },
        share_img: { required: true, type: 'array', message: '请上传图片', trigger: 'change' },
        pay_price: { required: true, validator: validateInt, trigger: 'blur' },
        true_price: { required: true, validator: validateInt, trigger: 'blur' },
        growth: { required: true, type: 'number', message: '请输入赠送成长值', trigger: 'blur' },
        top: { required: true, type: 'number', message: '请输入排序值', trigger: 'blur' },
        content: { required: true, type: 'string', message: '请输入套餐介绍', trigger: 'blur' }
      }
    }
  },
  async created () {
    let { id } = this.$route.query
    this.subForm.id = id
    if (id) {
      this.getDetail()
    }
    this.loading = false
  },
  methods: {
    goBack () {
      this.$router.back(-1)
    },
    getCover (img) {
      this.subForm.share_img = img
    },
    async getDetail () {
      let { id } = this.subForm
      let { code, data } = await this.$api.memberStoreInfo({ id })
      if (code !== 200) return
      if (data.share_img) {
        data.share_img = [{ url: data.share_img }]
      }
      for (let key in this.subForm) {
        this.subForm[key] = data[key]
      }
    },
    async submitFormInfo () {
      let subForm = JSON.parse(JSON.stringify(this.subForm))
      let formArr = ['aForm']
      let flag = true
      for (let i = 0, len = formArr.length; i < len; i++) {
        this.$refs[formArr[i]].validate((valid) => {
          if (!valid) {
            flag = false
            return false
          }
        })
      }
      if (flag) {
        subForm.share_img = subForm.share_img[0].url
        let methodModel = subForm.id ? 'memberStoreUpdate' : 'memberStoreAdd'
        let { code } = await this.$api[methodModel](subForm)
        if (code !== 200) return
        this.$message.success(this.$t('tips.successSub'))
        this.goBack()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-edit-stored {
  width: 100%;
  .el-input,
  .el-select,
  .lb-input-number,
  .el-cascader,
  .el-textarea {
    width: 400px;
  }
}
</style>
